<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${article.title}">文章详情</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            color: #333;
            line-height: 1.6;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .article-panel {
            flex: 1 1 70%;
            min-width: 500px;
            background-color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .article-panel:hover {
            transform: translateY(-5px);
        }

        .comment-panel {
            flex: 1 1 25%;
            min-width: 300px;
            background-color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .comment-panel:hover {
            transform: translateY(-5px);
        }

        /* 标题样式 */
        h1 {
            color: #3a7d44;
            margin-bottom: 15px;
            font-size: 28px;
            font-weight: 600;
            padding: 30px 30px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .button-group {
            padding: 0 30px 15px;
        }

        .btn {
            padding: 8px 20px;
            background-color: #e8f5e9;
            color: #3a7d44;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
            border: 1px solid #c8e6c9;
        }

        .btn:hover {
            background-color: #c8e6c9;
        }

        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            margin: 0 30px 20px;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e0f2f1;
        }

        .author-name {
            font-weight: bold;
            color: #3a7d44;
            margin-left: 10px;
        }

        /* 文章内容样式 */
        .article-content {
            line-height: 1.8;
            color: #444;
            font-size: 16px;
            margin: 0 30px 30px;
        }

        .article-content p {
            margin-bottom: 20px;
        }

        /* 元信息样式 */
        .meta-info {
            display: flex;
            justify-content: space-between;
            margin: 0 30px 30px;
            color: #777;
            font-size: 14px;
            padding: 15px 0;
            border-top: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
        }

        .view-count {
            margin-right: 15px;
        }

        /* 评论区样式 */
        .comment-section {
            padding: 30px;
        }

        .comment-section h3 {
            color: #3a7d44;
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .comment {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .comment-author {
            font-weight: bold;
            color: #3a7d44;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .comment-date {
            color: #9e9e9e;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .comment-content {
            margin-top: 5px;
            color: #444;
            font-size: 15px;
        }

        /* 评论表单样式 */
        .comment-form {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #f0f0f0;
        }

        .comment-input {
            width: 100%;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: vertical;
            font-size: 15px;
        }

        .submit-button {
            padding: 10px 25px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }

        .submit-button:hover {
            background-color: #388e3c;
        }

        /* 额外的样式 */
        .comment-form-title {
            color: #777;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .load-more {
            display: block;
            text-align: center;
            margin: 20px auto;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
            cursor: pointer;
            color: #3a7d44;
            font-weight: 500;
        }

        .load-more:hover {
            background-color: #e0e0e0;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 文章内容区域 -->
    <div class="article-panel">
        <h1 th:text="${article.title}" th:attr="data-article-id=${article.id}">文章标题</h1>
        <div class="button-group">
            <a th:href="@{/user/index}" class="btn">返回首页</a>
        </div>
        <div class="author-info">
            <img th:src="${article.image}" alt="作者头像" class="author-avatar">
            <span class="author-name" th:text="${article.username}">作者名</span>
        </div>
        <div class="article-content" th:text="${article.content}">文章内容</div>
        <div class="meta-info">
            <span class="view-count">阅读数: <span th:text="${article.viewCount}">100</span></span>
            <span>创建时间: <span th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</span></span>
            <span>最后修改时间: <span th:text="${#temporals.format(article.updatedAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</span></span>
        </div>
    </div>

    <!-- 评论区域 -->
    <div class="comment-panel">
        <div class="comment-section">
            <h3>评论区</h3>
            <div id="commentsContainer">
                <div th:each="comment : ${article.list}" class="comment" style="display: none;">
                    <div class="comment-author" th:text="${comment.username}">评论者名</div>
                    <div class="comment-date" th:text="${#temporals.format(comment.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</div>
                    <div class="comment-content" th:text="${comment.content}">评论内容</div>
                </div>
                <!-- 默认只显示前3条评论 -->
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const comments = document.querySelectorAll('.comment');
                        const commentsContainer = document.getElementById('commentsContainer');
                        const showCount = 3; // 默认显示的评论数
                        let isExpanded = false;

                        // 初始时只显示前3条评论
                        for (let i = 0; i < Math.min(comments.length, showCount); i++) {
                            comments[i].style.display = 'block';
                        }

                        if (comments.length > showCount) {
                            const loadMore = document.createElement('div');
                            loadMore.className = 'load-more';
                            loadMore.textContent = '展开更多评论';
                            loadMore.style.cursor = 'pointer';

                            loadMore.addEventListener('click', function() {
                                if (!isExpanded) {
                                    // 显示所有评论
                                    for (let i = showCount; i < comments.length; i++) {
                                        comments[i].style.display = 'block';
                                    }
                                    loadMore.textContent = '收起评论';
                                    isExpanded = true;
                                } else {
                                    // 只显示前3条评论
                                    for (let i = showCount; i < comments.length; i++) {
                                        comments[i].style.display = 'none';
                                    }
                                    loadMore.textContent = '展开更多评论';
                                    isExpanded = false;
                                }
                            });

                            commentsContainer.appendChild(loadMore);
                        }

                        // 注册评论提交事件
                        const commentInput = document.getElementById('commentContent');
                        const submitButton = document.querySelector('.submit-button');

                        submitButton.addEventListener('click', function() {
                            const articleId = document.querySelector('h1').dataset.articleId;
                            const commentContent = commentInput.value.trim();

                            if (!commentContent) {
                                alert('评论内容不能为空');
                                return;
                            }

                            fetch(`/comment/${articleId}`, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({ content: commentContent })
                            })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        alert('评论成功！');
                                        location.reload();
                                    } else {
                                        alert('评论失败，请稍后重试');
                                    }
                                })
                                .catch(error => console.error('Error:', error));
                        });
                    });
                </script>
            </div>

            <!-- 评论表单 -->
            <div class="comment-form">
                <div class="comment-form-title">发表您的评论</div>
                <textarea class="comment-input" id="commentContent" placeholder="请输入您的评论..." rows="4"></textarea>
                <button class="submit-button">发表评论</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>